<template>
    <el-container>
        <PageHeader class="header"/>
        <el-main>
            <div class="content">
                <el-row class="toTradePage">
                    <ToTradeBtn/>
                </el-row>
                <el-row class="sideBtn">
                    <SideBtn/>
                </el-row>
                <el-row class="filter_block">
                    <div class="block block_left">
                        <el-form label-width="110px" size="small">
                            <el-row>
                                <el-form-item label="关键字搜索" class="keywords">
                                    <el-col :span="10">
                                        <el-input v-model="form.acceptor_name" @input="inputKeywords" clearable @clear="clear_acceptor_name" placeholder="输入承兑人关键字，如: 兴业，招商，农业">
                                            <el-button type="primary" size="small" slot="append" @click="searchKeyword()" :disabled="!form.acceptor_name">搜索</el-button>
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="承兑机构" class="nowrap">
                                    <el-checkbox-group v-model="acceptorTypeArr" size="small" @change="changeCheckbox(acceptorTypeArr)">
                                        <el-checkbox-button v-for="item in acceptOptions" :label="item.key" :key="item.key">{{item.label}}</el-checkbox-button>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="票面金额" class="nowrap custom_condition">
                                    <el-radio-group v-model="form.billPrice" size="small" @change="changePrice()" class="bill_price">
                                        <el-radio-button v-for="item in billPriceOption" :label="item.key" :key="item.key">
                                            <span v-if="item.key === ''">不限</span>
                                            <span v-if="item.key !== ''">
                                                {{item.gtoe ? '[' : '('}}{{item.billPriceMin}}{{item.billPriceMin == '0' ? '' : '万'}},{{item.billPriceMax}}{{item.billPriceMax == '+∞' ? '' : '万'}}{{item.ltoe ? ']' : ')'}}
                                            </span>
                                        </el-radio-button>
                                    </el-radio-group>
                                    <div size="small" class="ready_bill_price" :class="{is_active: isInputPrice,is_focus: form.trem_billPrice.minPrice != '' || form.trem_billPrice.maxPrice != ''}">
                                        [ <el-input type="number" v-model="form.trem_billPrice.minPrice" placeholder="最小"></el-input>万, 
                                        <el-input type="number" v-model="form.trem_billPrice.maxPrice" placeholder="最大"></el-input>万 ]
                                    </div>
                                    <el-button type="primary" size="small" class="confirm_price"
                                        v-if="form.trem_billPrice.minPrice != '' && form.trem_billPrice.maxPrice != ''"
                                        @click="confirmPrice()">
                                        确定
                                    </el-button>
                                    <!-- <el-button type="info" size="small" class="cancel_price"
                                        v-if="form.trem_billPrice.minPrice != '' && form.trem_billPrice.maxPrice != ''"
                                        @click="clearPrice()">
                                        清空
                                    </el-button> -->
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="到期天数" class="nowrap custom_condition">
                                    <el-radio-group v-model="form.deadTime" size="small" @change="changeTime()" class="bill_price">
                                        <el-radio-button v-for="item in deadTimeOption" :label="item.key" :key="item.key">
                                            <span v-if="item.key === ''">不限</span>
                                            <span v-if="item.key !== ''">
                                                {{item.gtoe ? '[' : '('}}{{item.expiresDayMin}}{{item.expiresDayMin == '0' ? '' : '天'}},{{item.expiresDayMax}}{{item.expiresDayMax == '+∞' ? '' : '天'}}{{item.ltoe ? ']' : ')'}}
                                            </span>
                                        </el-radio-button>
                                    </el-radio-group>
                                    <div size="small" class="ready_bill_price" :class="{is_active: isInputTime,is_focus: form.trem_deadTime.minTime != '' || form.trem_deadTime.maxTime != ''}">
                                        [ <el-input type="number" v-model="form.trem_deadTime.minTime" placeholder="最小"></el-input>天, 
                                        <el-input type="number" v-model="form.trem_deadTime.maxTime" placeholder="最大"></el-input>天 ]
                                    </div>
                                    <el-button type="primary" size="small" class="confirm_days"
                                        v-if="form.trem_deadTime.minTime != '' && form.trem_deadTime.maxTime != ''"
                                        @click="confirmDays()">
                                        确定
                                    </el-button>
                                    <!-- <el-button type="info" size="small" class="cancel_days"
                                        v-if="form.trem_deadTime.minTime != '' && form.trem_deadTime.maxTime != ''"
                                        @click="clearTime()">
                                        清空
                                    </el-button> -->
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="背书瑕疵" class="nowrap">
                                    <el-radio-group v-model="form.flaw" size="small" @change="changeFlaw(form.flaw)">
                                        <el-radio-button v-for="item in flawOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="竞价方式" class="nowrap">
                                    <el-radio-group v-model="form.biddingMode" size="small" @change="changeBiddingMode()">
                                        <el-radio-button v-for="item in biddingModeOption" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="票据状态" class="nowrap">
                                    <el-radio-group v-model="form.billStatus" size="small" @change="changeBillStatus()">
                                        <el-radio-button v-for="item in billStatusOption" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="买方价格">
                                    <el-input type="number" onkeydown="javascript: return event.keyCode == 69 || event.keyCode == 107 || event.keyCode == 109 ? false : true" v-model="form.billRate" @input="inputRate" class="bill_rate" placeholder="年利率" min="0"></el-input> % + 
                                    <el-input type="number" onkeydown="javascript: return event.keyCode == 69 || event.keyCode == 107 || event.keyCode == 109 ? false : true" v-model="form.everyPlus" @input="inputEveryplus" class="every_plus" placeholder="每十万手续费" min="0"></el-input> 元 
                                    <el-popover
                                        placement="bottom-start"
                                        width="380"
                                        trigger="hover"
                                        content="如：输入5.0+60，筛选出可买入的票源，买卖差价可排序">
                                        <span class="tips hpx-red-tips" slot="reference"><i class="iconfont icon-wenhao"></i></span>
                                    </el-popover>
                                    <el-button type="primary" size="small" 
                                        v-if="form.billRate != '' || form.everyPlus != ''"
                                        @click="confirmRate()">
                                        确定
                                    </el-button>
                                    <el-button type="info" size="small" 
                                        v-if="form.billRate != '' || form.everyPlus != ''"
                                        @click="clearRate()">
                                        清空
                                    </el-button>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="筛选条件" class="condition_tangs">
                                    <el-tag
                                        v-for="tag in tags"
                                        :key="tag.name"
                                        closable
                                        disable-transitions
                                        :type="tag.type"
                                        size="small"
                                        @close="closeTag(tag)">
                                        {{tag.name}}
                                    </el-tag>
                                    <span v-if="tags.length == 0" class="hpx-label">无</span>
                                    <span class="clear_filter" v-if="tags && tags.length != 0" @click="clearFilter()"><i class="iconfont icon-shanchu"></i> 清空筛选</span>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </div>
                    <!-- 购票车 -->
                    <div class="block block_right">
                        <el-row class="block_title">我的购票车</el-row>
                        <div v-if="isLogin && billCarData.length != 0">
                            <BillCar :data="billCarData" @delete="deleteCar" @bidding="biddingBill"/>
                            <a href="billCar.html"><el-row class="more">查看更多 >></el-row></a>
                        </div>
                        <div class="myBillCar" v-if="isLogin && billCarData.length == 0">
                            <el-row class="foundBill">您的购票车还是空的，赶紧去找票源吧！</el-row>
                        </div>
                        <div class="myBillCar" v-if="!isLogin">
                            <el-row class="welcome">
                                Hi，欢迎来到汇票线 !
                            </el-row>
                            <el-row class="operate">
                                <a href="user.html#/?back=market.html"><el-button type="primary" size="small">登录</el-button></a>
                                <a href="user.html#/register"><el-button type="primary" plain size="small">注册</el-button></a>
                            </el-row>
                        </div>
                    </div>
                    <!-- 删除购票车警告弹框 -->
                    <DialogInput ref="delete-warning" title="提示">
                        <div class="rem-dialog-con reserva-dialog">
                            <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                            <el-row>确定从购票车删除此条数据吗？</el-row>
                        </div>
                        <span slot="Remfooter">
                            <el-button @click="closeDialog()" type="info" size="small" class="hpx-cancel-color dialog-button">取消</el-button>
                            <el-button @click="confirmDelete()" type="primary" size="small" class="dialog-button">确定</el-button>
                        </span>
                    </DialogInput>
                </el-row>
                <!-- 票据列表 -->
                <el-row class="table_title">
                    <div class="title_word">票源信息</div>
                    <el-button type="primary" size="small" @click="publishBill"><i class="iconfont icon-fabu"></i> 发布票据</el-button>
                </el-row>
                <el-row class="restDay" v-if="isRestDay">
                    <el-row class="middle_inner">
                        <p>未开市</p>
                        <p>
                            <i class="iconfont icon-shijian hpx-red-tips"></i> 开市时间:
                            <span class="time">正常工作日<span class="detailTime">(08:00-21:00)</span></span>
                        </p>
                    </el-row>
                </el-row>
                <el-row class="bill_data" v-if="!isRestDay">
                    <el-table 
                            ref="draftTable"
                            :data="tableData.body"
                            :default-sort="defaultSort"
                            @sort-change="changeSort">
                        <el-table-column
                            label="发布时间"
                            prop="bill_product_create_time"
                            sortable="custom"
                            :sort-orders="['ascending', 'descending']"
                            :formatter="formatterDate"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            label="承兑人"
                            prop="acceptor_name"
                            width="200">
                            <template slot-scope="scope">
                                <span class="bill_source">
                                    <i class="iconfont icon-caipiao hpx-link" v-if="scope.row.acceptor_type_id == 407"></i>
                                    <i class="iconfont icon-shangpiao hpx-red-tips" v-if="scope.row.acceptor_type_id == 408"></i>
                                </span>
                                <span>{{ formatterAcceptor(scope.row) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="票面金额(万)"
                            prop="bill_sum_price"
                            sortable="custom"
                            :sort-orders="['ascending', 'descending']"
                            :formatter="formatterPrice">
                        </el-table-column>
                        <el-table-column
                            label="到期时间"
                            prop="bill_deadline_time_format"
                            sortable="custom"
                            :sort-orders="['ascending', 'descending']"
                            width="200">
                        </el-table-column>
                        <el-table-column
                            label="背书瑕疵"
                            prop="bill_flaw_names">
                            <template slot-scope="scope">
                                <div :class="{'hpx-red-tips':scope.row.bill_flaw_ids != '1500'}">
                                    {{ formatterFlaw(scope.row.bill_flaw_names.join(',')) }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-if="!isDifference"
                            label="每十万扣"
                            prop="billEveryPlus">
                            <template slot-scope="scope" v-if="!isDifference">
                                <span class="hpx-red-tips">
                                    {{ scope.row.bidding_mode == 3210 ? '一口价' + scope.row.billEveryPlus + '元' : (scope.row.billEveryPlus && scope.row.billEveryPlus != 0 ? '竞价' + scope.row.billEveryPlus + '元' : '竞价') }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-if="isDifference"
                            label="买卖差额"
                            prop="billOfferEveryPlus"
                            sortable="custom"
                            :sort-orders="['ascending', 'descending']"
                            width="200">
                            <template slot-scope="scope" v-if="isDifference">
                                <el-popover trigger="hover" placement="top" v-if="scope.row.bidding_mode == 3210 || (scope.row.bidding_mode == 3212 && scope.row.every_plus_interest > 0)">
                                    <el-row>
                                        <span>卖方({{ scope.row.bill_rate }}%)</span> / <span>买方({{ scope.row.offer_rate }}%)</span> / <span>差价</span>
                                    </el-row>
                                    <div slot="reference" class="name-wrapper">
                                        <div v-if="scope.row.billOfferEveryPlus > 0 || Math.abs(scope.row.billOfferEveryPlus) < 50">
                                            <span class="hpx-red-tips">{{scope.row.billEveryPlus}}</span> / <span>{{scope.row.offerEveryPlus}}</span> / <span :class="{'hpx-red-tips':scope.row.billOfferEveryPlus >= 0,'hpx-success':scope.row.billOfferEveryPlus < 0}">{{scope.row.billOfferEveryPlus}}</span>
                                        </div>
                                        <div v-if="scope.row.billOfferEveryPlus < 0 && Math.abs(scope.row.billOfferEveryPlus) > 50">竞价</div>
                                    </div>
                                </el-popover>
                                <span class="hpx-red-tips" v-if="scope.row.bidding_mode == 3212 && scope.row.every_plus_interest == 0">竞价</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            label="平均背书时长"
                            prop="endorsementTimeAVG">
                        </el-table-column> -->
                        <el-table-column
                            label="操作"
                            width="160">
                            <template slot-scope="scope">
                                <div v-if="!userInfo || userInfo && scope.row.drawer_id != userInfo.enterprise_id">
                                    <el-button type="primary" 
                                        size="small"
                                        v-if="scope.row.bill_status_code == 801"
                                        @click="toBidding(scope.row)">
                                        我要买
                                    </el-button>
                                    <span v-if="scope.row.bill_status_code >= 804 && scope.row.bill_status_code < 810">交易中</span>
                                    <span v-if="scope.row.bill_status_code >= 810" size="small" class="hpx-success">交易完成</span>
                                    <el-button type="text" size="small" v-if="scope.row.bill_status_code == 801" @click="addBillCar(scope.row.bill_product_id)">
                                        <i class="iconfont icon-goupiaoche"></i>
                                    </el-button>
                                </div>
                                <div v-if="userInfo && scope.row.drawer_id == userInfo.enterprise_id">
                                    自己的票
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row class="market_pagination">
                        <el-pagination
                            @current-change="changePage"
                            @size-change="changeSize"
                            :current-page="tableData.footer.currentPage"
                            :page-sizes="[10, 15, 20, 30, 40]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="tableData.footer.total">
                        </el-pagination>
                    </el-row>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <PageFooter class="footer"/>
        </el-footer>
    </el-container>
</template>

<script lang="ts">
    import {Vue, Component, Watch} from 'vue-property-decorator'
    import PageHeader from '@component/common/PageHeader.vue'
    import PageFooter from '@component/common/PageFooter.vue'
    import Table from '@component/common/HpxTable.vue'
    import DialogInput from '@component/common/DialogInput.vue'
    import BillCar from './billCar.vue'
    import moment from 'moment'
    import _ from 'lodash'
    import { ellipsis } from '@/util/format'
    import { log } from 'util';
    import { mapGetters, mapState, mapActions } from 'vuex';
    import ToTradeBtn from '@/component/common/ToTradeBtn.vue'
    import SideBtn from '@/component/common/SideBtn.vue'
    // import { setInterval } from 'timers';
    import calc from 'calculatorjs'
    @Component({
        components: {
            PageHeader,
            PageFooter,
            Table,
            BillCar,
            DialogInput,
            ToTradeBtn,
            SideBtn
        },
        computed: {
            ...mapState([
                'messageNumber',
                'allTips',
                // 'userInfo'
            ])
        },
        methods: {
            ...mapActions([
                'getAllTips',
                'getMessageNumber'
            ])
        }
    })
    export default class Market extends Vue {
        //筛选条件
        marketSearch:any = {}
        //是否休息日
        isRestDay = false
        //购票车删除的数据
        deleteModel = {}
        //选中的承兑机构
        acceptorTypeArr = ['']
        isInputPrice = false
        isInputTime = false
        form = {
            acceptor_name: '',
            acceptorType: '',
            billPrice: '',
            trem_billPrice: {
                minPrice: '',
                maxPrice: ''
            },
            deadTime: '',
            trem_deadTime: {
                minTime: '',
                maxTime: ''
            },
            flaw: '',
            biddingMode: '',
            billStatus: '',
            billRate: '',
            everyPlus: ''
        }
        //选中的承兑机构类型
        oldChecked:any = []
        //筛选条件标签
        tags:any = []
        
        acceptOptions = [{
                label: '不限',
                key: ''
            },{
                label: '国股',
                key: '401'
            },{
                label: '城商',
                key: '402'
            },{
                label: '三农',
                key: '404'
            },{
                label: '村镇',
                key: '405'
            },{
                label: '外资',
                key: '406'
            },{
                label: '财务公司',
                key: '407'
            },{
                label: '商票',
                key: '408'
        }]
        billPriceOption = [{
                label: '不限',
                billPriceMin: '',
                billPriceMax: '',
                gtoe: false, // >=
                ltoe: false, // <=
                key: ''
            },{
                label: '(0,10万)',
                billPriceMin: '0',
                billPriceMax: '10',
                gtoe: false, // >=
                ltoe: false, // <=
                key: '0'
            },{
                label: '[10万,50万)',
                billPriceMin: '10',
                billPriceMax: '50',
                gtoe: true, // >=
                ltoe: false, // <=
                key: '1'
            },{
                label: '[50万,100万)',
                billPriceMin: '50',
                billPriceMax: '100',
                gtoe: true, // >=
                ltoe: false, // <=
                key: '2'
            },{
                label: '[100万,+∞)',
                billPriceMin: '100',
                billPriceMax: '+∞',
                gtoe: true, // >=
                ltoe: false, // <=
                key: '3'
        }]
        deadTimeOption = [{
                label: '不限',
                expiresDayMin: '',
                expiresDayMax: '',
                gtoe: false,
                ltoe: false,
                key: ''
            },{
                label: '(0,90天)',
                expiresDayMin: '0',
                expiresDayMax: '90',
                gtoe: false,
                ltoe: false,
                key: '0'
            },{
                label: '[90天,150天)',
                expiresDayMin: '90',
                expiresDayMax: '150',
                gtoe: true,
                ltoe: false,
                key: '1'
            },{
                label: '[150天,186天)',
                expiresDayMin: '150',
                expiresDayMax: '186',
                gtoe: true,
                ltoe: false,
                key: '2'
            },{
                label: '[186天,330天)',
                expiresDayMin: '186',
                expiresDayMax: '330',
                gtoe: true,
                ltoe: false,
                key: '3'
            },{
                label: '[330天,+∞)',
                expiresDayMin: '330',
                expiresDayMax: '+∞',
                gtoe: true,
                ltoe: false,
                key: '4'
        }]
        flawOptions = [{
                label: '不限',
                key: ''
            },{
                label: '无瑕疵',
                key: '1500'
            },{
                label: '回头',
                key: '1501'
            },{
                label: '重复',
                key: '1506'
            },{
                label: '质押',
                key: '1507'
            },{
                label: '保证',
                key: '1512'
            },{
                label: '保理',
                key: '1513'
            },{
                label: '上下不一致',
                key: '1514'
            },{
                label: '其他',
                key: '2202'
        }]
        biddingModeOption = [{
                label: '不限',
                key: ''
            },{
                label: '自由竞价',
                key: '3212'
            },{
                label: '一口价',
                key: '3210'
        }]
        billStatusOption = [{
                label: '不限',
                key: ''
            },{
                label: '询价中',
                key: '801'
            },{
                label: '交易中',
                key: '5'
            },{
                label: '交易完成',
                key: '15'
        }]
        //票源数据
        tableData:TableData = {
            header: [
                {
                    label: '发布时间',
                    key: 'bill_product_create_time',
                    formatter: (row:any) => moment(row.bill_product_create_time).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => row.bill_style_id == 303 ? '聚 ' + ellipsis(row.acceptor_name, '...', 10) : '' + ellipsis(row.acceptor_name, '...', 10)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price',
                    formatter: (row:any) => calc.div(row.bill_sum_price,10000)
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time_format'
                },
                {
                    label: '背书瑕疵',
                    key: 'bill_flaw_names',
                    formatter: (row:any) => row.bill_flaw_names ? row.bill_flaw_names.join(',') : ''
                },
                {
                    label: '每十万扣',
                    key: 'bill_every_plus',
                    formatter: (row:any) => row.bidding_mode == 3210 ? '一口价' + row.bill_every_plus + '元' : '竞价'
                },
                {
                    label: '买卖差额',
                    key: 'billOfferEveryPlus'
                },
                // {
                //     label: '平均背书时长',
                //     key: 'endorsementTimeAVG'
                // }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            }
        }
        //是否显示买卖差额
        isDifference = false
        //购票车
        billCarData = []
        filterCondition = {
            //关键字
            keyWord: '',
            //承兑机构
            acceptType: '',
            // 票面金额
            billPrice: { min: '', max: '', gtoe: false, ltoe: false },
            // 到期天数
            expiresDays: { min: '', max: '', gtoe: false, ltoe: false },
            //背书瑕疵
            flaw: '',
            //竞价方式
            biddingMode: '',
            //票据状态
            billStatus: '',
            //买方价格
            hopePrice: { rate: '', everyPlus: '' }
        }
        userInfo:any = {}
        isLogin:boolean = false
        sortMode = ''
        defaultSort = {prop: 'bill_product_create_time', order: 'descending'}
        normalSort = true
        //调用请求列表函数来源
        transferChannel = ''
    //methods
        formatStr (str:string) {
            return ellipsis(str,'...',6)
        }
        get filterType() {
            return {
                keyWord: `关键字:${this.filterCondition.keyWord}`,
                acceptType: `承兑机构:${this.filterCondition.acceptType}`,
                billPrice: `
                    票面金额:${this.filterCondition.billPrice.gtoe ? '[' : '('}${this.filterCondition.billPrice.min}${this.filterCondition.billPrice.min == '0' ? '' : '万'},
                            ${this.filterCondition.billPrice.max}${this.filterCondition.billPrice.max == '+∞' ? '' : '万'}${this.filterCondition.billPrice.ltoe ? ']' : ')'}`,
                expiresDays: `
                    到期天数:
                            ${this.filterCondition.expiresDays.gtoe ? '[' : '('}${this.filterCondition.expiresDays.min}${this.filterCondition.expiresDays.min == '0' ? '' : '天'},
                            ${this.filterCondition.expiresDays.max}${this.filterCondition.expiresDays.max == '+∞' ? '' : '天'}${this.filterCondition.expiresDays.ltoe ? ']' : ')'}`,
                flaw: `背书瑕疵: ${this.filterCondition.flaw}`,
                biddingMode: `竞价方式: ${this.filterCondition.biddingMode}`,
                billStatus: `票据状态: ${this.filterCondition.billStatus}`,
                hopePrice: `买方价格: 
                    ${this.filterCondition.hopePrice.rate == '' ? '' : '年化' + this.filterCondition.hopePrice.rate + '%'}${this.filterCondition.hopePrice.everyPlus == '' ? '' : (this.filterCondition.hopePrice.rate == '' ? '' : '+') + this.filterCondition.hopePrice.everyPlus + '元'}`
            }
        }
        //查询票据列表
        async getBillList () {
            if(this.transferChannel == ''){
                this.tableData.footer.currentPage = 1
            }
            let params = {
                acceptor_name: this.form.acceptor_name,
                acceptor_type_id: this.form.acceptorType,
                bidding_mode: this.form.biddingMode,
                bill_flaws: this.form.flaw,
                bill_status: this.form.billStatus,
                bill_sum_price_min: this.filterCondition.billPrice.min,
                bill_sum_price_max: this.filterCondition.billPrice.max == '+∞' ? '' : this.filterCondition.billPrice.max,
                // bill_sum_price_type: '',
                bill_type_id: '',
                deadline_time_min: this.filterCondition.expiresDays.min,
                deadline_time_max: this.filterCondition.expiresDays.max == '+∞' ? '' : this.filterCondition.expiresDays.max,
                // is_bidding: '',
                offer_rate: this.form.billRate,
                offer_every_plus: this.form.everyPlus,
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage,
                orderBy: this.sortMode
            }
            let res = await this.$http.get('bills/billProduct/list',{params},{loading:false})
            if(res.status == 200){
                this.tableData.body = res.data.listName
                this.tableData.footer.total = res.data.page_info.items_number
                this.tableData.footer.pageSize = res.data.page_info.items_per_page
                // this.tableData.footer.currentPage = res.data.page_info.current_page
                this.transferChannel = ''
                
            }else if(res.status == 230){
                this.isRestDay = true
            }
        }
        //生成筛选条件标签
        getConditionTag (label:string, variable:string) {
            let tag = {
                name: label,
                variable: variable, 
                type: 'danger'
            }
            this.tags.push(tag)
        }
        //关闭标签
        closeTag (tag) {
            this.tags.splice(this.tags.indexOf(tag), 1)
            let variable = tag.variable 
            switch (variable) {
                case 'acceptor_name':
                    this.form.acceptor_name = ''
                    break;
                case 'acceptorType':
                    let deleteTag = _.find(this.acceptOptions, (el)=> tag.name.indexOf(el.label)>-1)
                    if(deleteTag){
                        this.acceptorTypeArr.forEach((item, index) => {
                            if(item === deleteTag.key){
                                this.acceptorTypeArr.splice(index,1)
                                if(this.acceptorTypeArr.length == 0){
                                    this.acceptorTypeArr = ['']
                                }
                            }
                        })
                    }
                    break;
                case 'billPrice':
                    this.form.billPrice = ''
                    this.form.trem_billPrice.minPrice = ''
                    this.form.trem_billPrice.maxPrice = ''
                    this.filterCondition.billPrice.min = '';
                    this.filterCondition.billPrice.max = '';
                    this.isInputPrice = false
                    break;
                case 'expiresDays':
                    this.form.deadTime = ''
                    this.form.trem_deadTime.minTime = ''
                    this.form.trem_deadTime.maxTime = ''
                    this.filterCondition.expiresDays.min = '';
                    this.filterCondition.expiresDays.max = '';
                    this.isInputTime = false
                    break;
                case 'flaw':
                    this.form.flaw = ''
                    break;
                case 'biddingMode':
                    this.form.biddingMode = ''
                    break;
                case 'billStatus':
                    this.form.billStatus = ''
                    break;
                case 'hopePrice':
                    this.form.billRate = ''
                    this.form.everyPlus = ''
                    break;
            }
            this.tips()
            this.saveCondition()
        }
        //由选项的key得出对应的label
        getCheckLabel (arr:any, value:string) {
            for(let i = 0;i<arr.length;i++){
                if(arr[i].key === value){
                    return arr[i].label
                }
            }
        }
        //点击不限时删除对应的标签
        deleteTags (variable:string) {
            let anotherTags = this.tags.filter((el, index) => {
                return el.variable !== variable
            })
            this.tags = anotherTags;
        }
        
        //比较两个数组的差异
        diff(arr1, arr2) {
            let newArr = [];
            let arr3 = [];
            for (let i=0;i<arr1.length;i++) {
                if(arr2.indexOf(arr1[i]) === -1)   
                arr3.push(arr1[i]);
            }
            let arr4 = [];
            for (let j=0;j<arr2.length;j++) {
                if(arr1.indexOf(arr2[j]) === -1)
                arr4.push(arr2[j]);
            }
            newArr = arr3.concat(arr4);
            return newArr;
        }
        //把筛选条件保存到localStorage
        saveCondition () {
            // if(this.isLogin) return false
            let condition = {
                acceptorTypeArr: this.acceptorTypeArr,
                acceptor_name: this.form.acceptor_name,
                acceptor_type_id: this.form.acceptorType,
                billPrice: {
                    min: this.filterCondition.billPrice.min,
                    max: this.filterCondition.billPrice.max,
                    gtoe: this.filterCondition.billPrice.gtoe,
                    ltoe: this.filterCondition.billPrice.ltoe
                },
                expiresDays: {
                    min: this.filterCondition.expiresDays.min,
                    max: this.filterCondition.expiresDays.max,
                    gtoe: this.filterCondition.expiresDays.gtoe,
                    ltoe: this.filterCondition.expiresDays.ltoe
                },
                bill_flaws: this.form.flaw,
                bidding_mode: this.form.biddingMode,
                bill_status: this.form.billStatus,
                offer_every_plus: this.form.everyPlus,
                offer_rate: this.form.billRate
            }
            localStorage.setItem('searchMarket',JSON.stringify(condition))
        }
        //判断是否登录
        tips () {
            if(!this.isLogin){
                this.$confirm('登录后可筛选实时数据','提示',{
                    confirmButtonText: '立即登录',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box'
                }).then(() => {
                    window.location.href = 'user.html#/?back=market.html'
                }).catch(()=>{})
                return false
            }

            if(this.form.billRate || this.form.everyPlus){
                this.isDifference = true
            }else{
                this.isDifference = false
            }
            if(this.normalSort){
                this.getBillList()
            } else {
                this.$refs.draftTable.clearSort();
                this.$nextTick(()=>{
                    this.$refs.draftTable.sort('billOfferEveryPlus', 'descending')
                })
            }
        }
        //搜索关键字
        searchKeyword () {
            this.filterCondition.keyWord = this.form.acceptor_name
            let currentTag = _.find(this.tags, el => el.variable === 'acceptor_name')
            if(currentTag) {
                currentTag.name = this.filterType.keyWord
            } else {
                this.getConditionTag(this.filterType.keyWord,'acceptor_name')
            }
            this.tips()
            this.saveCondition()
        }
        //
        inputKeywords () {
            if(this.form.acceptor_name == ''){
                this.tips()
                this.deleteTags('acceptor_name')
                this.saveCondition()
            }
        }
        //清空关键字
        clear_acceptor_name () {
            this.form.acceptor_name = ''
            this.deleteTags('acceptor_name')
            // this.getBillList()
            this.tips()
            this.saveCondition()
        }
        //切换承兑机构
        changeCheckbox (item:any) {
            //如果点击不限，则取消其他选项
            if(item[item.length-1] == ''){
                this.acceptorTypeArr = ['']
                this.deleteTags('acceptorType')
            }else{
                // this.oldChecked = item
                //点击取消了某个选项
                if(item.length < this.oldChecked.length){
                    //删除的承兑类型id
                    let deleteId = this.diff(Array.from(item), Array.from(this.oldChecked))
                    //删除的承兑类型name
                    let deleteStr = this.getCheckLabel(this.acceptOptions,deleteId.join().toString())
                    //删除的标签
                    let deleteTag = _.find(this.tags,(el) => el.name.indexOf(deleteStr)>-1)
                    if(deleteTag){
                        this.tags.splice(this.tags.indexOf(deleteTag),1)
                    }
                    this.oldChecked = item
                }else{
                    //新增选中了某个选项
                    this.oldChecked = item
                    //选中的类型
                    this.filterCondition.acceptType = this.getCheckLabel(this.acceptOptions,item[item.length-1])
                    this.getConditionTag(this.filterType.acceptType, 'acceptorType')
                }
                //点击其它选项，则取消“不限”的选中状态
                if(item.indexOf('')>-1){
                    item.splice(item.indexOf(''),1)
                    this.acceptorTypeArr = item
                }
                
                //取消了全部选项
                if(item.length == 0){
                    this.acceptorTypeArr = ['']
                    this.deleteTags('acceptorType')
                }
            }
            this.form.acceptorType = this.acceptorTypeArr.join(',')
            this.tips()
            this.saveCondition()
        }
        //切换票面金额
        changePrice () {
            this.form.trem_billPrice.minPrice = ''
            this.form.trem_billPrice.maxPrice = ''
            this.isInputPrice = false
            
            //筛选出当前选中选项的值
            let { billPriceMin, billPriceMax, gtoe, ltoe} = _.find(this.billPriceOption,(e, i) => {
                return e.key == this.form.billPrice;
            })
            this.filterCondition.billPrice.min = billPriceMin;
            this.filterCondition.billPrice.max = billPriceMax;
            this.filterCondition.billPrice.gtoe = gtoe;
            this.filterCondition.billPrice.ltoe = ltoe;
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'billPrice')
            if(currentTag) {
                currentTag.name = this.filterType.billPrice
            } else {
                this.getConditionTag(this.filterType.billPrice, 'billPrice')
            }
            //点击不限删除对应标签
            if(this.form.billPrice == ''){
                this.deleteTags('billPrice')
            }
            this.tips()
            this.saveCondition()
        }
        //确定输入票面金额
        confirmPrice () {
            //取消不限
            this.form.billPrice = '-1'
            //选中输入的金额
            this.isInputPrice = true
            this.filterCondition.billPrice.min = this.form.trem_billPrice.minPrice;
            this.filterCondition.billPrice.max = this.form.trem_billPrice.maxPrice;
            this.filterCondition.billPrice.gtoe = true;
            this.filterCondition.billPrice.ltoe = true;
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'billPrice')
            if(currentTag) {
                currentTag.name = this.filterType.billPrice
            } else {
                this.getConditionTag(this.filterType.billPrice, 'billPrice')
            }
            this.tips()
            this.saveCondition()
        }
        //清空票面金额
        clearPrice () {
            this.deleteTags('billPrice')
            this.form.billPrice = ''
            this.isInputPrice = false
            this.form.trem_billPrice.minPrice = ''
            this.form.trem_billPrice.maxPrice = ''
            this.filterCondition.billPrice.min = '';
            this.filterCondition.billPrice.max = '';
            this.tips()
            this.saveCondition()
        }
        //切换到期天数
        changeTime () {
            this.form.trem_deadTime.minTime = ''
            this.form.trem_deadTime.maxTime = ''
            this.isInputTime = false

            //筛选出当前选中选项的值
            let { expiresDayMin, expiresDayMax, gtoe, ltoe} = _.find(this.deadTimeOption, (e, i) => {
                return e.key == this.form.deadTime;
            })
            this.filterCondition.expiresDays.min = expiresDayMin;
            this.filterCondition.expiresDays.max = expiresDayMax;
            this.filterCondition.expiresDays.gtoe = gtoe;
            this.filterCondition.expiresDays.ltoe = ltoe;
            

            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'expiresDays')
            if(currentTag) {
                currentTag.name = this.filterType.expiresDays
            } else {
                this.getConditionTag(this.filterType.expiresDays, 'expiresDays')
            }
            //点击不限删除对应标签
            if(this.form.deadTime == ''){
                this.deleteTags('expiresDays')
            }
            this.tips()
            this.saveCondition()
        }
        //确定输入到期天数
        confirmDays () {
            let regexp = /^[0-9]*$/;
            if(!regexp.test(this.form.trem_deadTime.minTime) || !regexp.test(this.form.trem_deadTime.maxTime))
            {
                this.$alert('请输入正确的天数','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                }).catch()
                return false;
            }
            this.form.deadTime = '-1'
            this.isInputTime = true

            this.filterCondition.expiresDays.min = this.form.trem_deadTime.minTime;
            this.filterCondition.expiresDays.max = this.form.trem_deadTime.maxTime;
            this.filterCondition.expiresDays.gtoe = true;
            this.filterCondition.expiresDays.ltoe = true;

            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'expiresDays')
            if(currentTag) {
                currentTag.name = this.filterType.expiresDays
            } else {
                this.getConditionTag(this.filterType.expiresDays, 'expiresDays')
            }
            this.tips()
            this.saveCondition()
        }
        //清空到期天数
        clearTime () {
            this.deleteTags('expiresDays')
            this.form.deadTime = ''
            this.isInputTime = false
            this.form.trem_deadTime.minTime = ''
            this.form.trem_deadTime.maxTime = ''
            this.filterCondition.expiresDays.min = '';
            this.filterCondition.expiresDays.max = '';
            this.tips()
            this.saveCondition()
        }
        //切换背书瑕疵
        changeFlaw () {
            //筛选出当前选中选项的值
            let {label} = _.find(this.flawOptions,(e, i) => {
                return e.key == this.form.flaw;
            })
            this.filterCondition.flaw = label
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'flaw')
            if(currentTag) {
                currentTag.name = this.filterType.flaw
            } else {
                this.getConditionTag(this.filterType.flaw, 'flaw')
            }
            //点击不限删除对应标签
            if(this.form.flaw == ''){
                this.deleteTags('flaw')
            }
            this.tips()
            this.saveCondition()
        }
        //切换竞价方式
        changeBiddingMode () {
            let {label} = _.find(this.biddingModeOption,(e, i) => {
                return e.key == this.form.biddingMode;
            })
            this.filterCondition.biddingMode = label;
            let currentTag = _.find(this.tags,el => el.variable === 'biddingMode')
            if(currentTag) {
                currentTag.name = this.filterType.biddingMode
            }else{
                this.getConditionTag(this.filterType.biddingMode, 'biddingMode')
            }
            if(this.form.biddingMode == ''){
                this.deleteTags('biddingMode')
            }
            this.tips()
            this.saveCondition()
        }
        //切换票据状态
        changeBillStatus () {
            let {label} = _.find(this.billStatusOption,(e, i) => {
                return e.key === this.form.billStatus
            })
            this.filterCondition.billStatus = label
            let currentTag = _.find(this.tags, el => el.variable === 'billStatus')
            if(currentTag){
                currentTag.name = this.filterType.billStatus
            }else{
                this.getConditionTag(this.filterType.billStatus, 'billStatus')
            }
            if(this.form.billStatus == ''){
                this.deleteTags('billStatus')
            }
            this.tips()
            this.saveCondition()
        }
        //确定输入利率
        confirmRate () {
            this.filterCondition.hopePrice.rate = this.form.billRate
            this.filterCondition.hopePrice.everyPlus = this.form.everyPlus

            let currentTag = _.find(this.tags, el => el.variable === 'hopePrice')
            if(currentTag){
                currentTag.name = this.filterType.hopePrice
            }else{
                this.getConditionTag(this.filterType.hopePrice, 'hopePrice')
            }
            this.normalSort = false
            // if(this.userInfo){
            //     this.changeSort({column:{},prop: "billOfferEveryPlus", order: "descending"})
            // }
            this.tips()
            this.saveCondition()
        }
        //清空/输入利率
        inputRate () {
            if(this.form.billRate == ''){
                this.tips()
            }
            if(this.form.billRate == '' && this.form.everyPlus == ''){
                this.tips()
                this.deleteTags('hopePrice')
            }
            this.saveCondition()
        }
        inputEveryplus () {
            if(this.form.everyPlus == ''){
                this.tips()
            }
            if(this.form.billRate == '' && this.form.everyPlus == ''){
                this.tips()
                this.deleteTags('hopePrice')
            }
            this.saveCondition()
        }
        //清空买方价格
        clearRate () {
            this.deleteTags('hopePrice')
            this.form.billRate = ''
            this.form.everyPlus = ''
            this.isDifference = false
            this.$refs.draftTable.clearSort();
            this.$refs.draftTable.sort('bill_product_create_time', 'descending')
            this.saveCondition()
        }
        //清空筛选条件
        clearFilter () {
            this.tags = []
            this.acceptorTypeArr = ['']
            this.isInputPrice = false
            this.isInputTime = false
            this.form = {
                acceptor_name: '',
                acceptorType: '',
                billPrice: '',
                trem_billPrice: {
                    minPrice: '',
                    maxPrice: ''
                },
                deadTime: '',
                trem_deadTime: {
                    minTime: '',
                    maxTime: ''
                },
                flaw: '',
                biddingMode: '',
                billStatus: '',
                billRate: '',
                everyPlus: ''
            }
            this.filterCondition.billPrice.min = ''
            this.filterCondition.billPrice.max = '',
            this.filterCondition.expiresDays.min = '',
            this.filterCondition.expiresDays.max = '',
            // this.tips()
            // this.sortMode = '-bill_product_create_time'
            // this.getBillList()
            this.isDifference = false
            this.$refs.draftTable.clearSort();
            this.$refs.draftTable.sort('bill_product_create_time', 'descending')
            this.saveCondition()
        }
        //发布票据
        publishBill () {
            if(!this.isLogin){
                window.location.href = 'user.html#/?back=market.html'
                return false
            }
            this.getAccountStatus()
        }
        //查询执剑人账户,判断是否可以发票
        async getAccountStatus () {
            let params = {
                customerId1: this.userInfo.customer_id,
                enterpriseId: this.userInfo.enterprise_id
            }
            let res = await this.$http.get('customerInfoStatus/queryCustomerInfoStatus',{params})
            if(res.status == 200 && res.data && res.data.accountBinding == 2){
                window.location.href = 'trade.html#/seller/posted/1/0'
            }else{
                this.$confirm('请先完成账户绑定操作','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box'
                }).then(()=>{
                    window.location.href = 'trade.html'
                }).catch(()=>{})
            }
        }
        //我要买
        toBidding (obj) {
            if(!this.isLogin){
                window.location.href = `user.html#/?back=market.html`
                return false
            }else{
                if(obj.drawer_id == this.userInfo.enterprise_id){
                    window.location.href = 'trade.html#/seller/myBill/detail/'+obj.bill_id
                }else{
                    window.location.href = 'trade.html#/buyer/myBidding/detail/'+obj.bill_product_id
                }
            }
        }
        //添加购票车
        async addBillCar (id) {
            if(!this.isLogin){
                window.location.href = `user.html#/?back=market.html`
                return false
            }
            let billCar = {
                bill_product_id: id
            }
            let res = await this.$http.post(`bills/billCar`,billCar)
            if(res.status == 200){
                this.$alert(res.msg,'加入购票车',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                this.getAllTips()
                this.getBillCarList()
            }
        }
        //获取购票车数据
        async getBillCarList () {
            let params = {
                n: 3
            }
            let res = await this.$http.get('bills/billCar',{params})
            if(res.status == 200){
                this.billCarData = res.data.billcar_list
            }
        }
        //删除购票车数据
        async deleteCar (item) {
            this.deleteModel = item
            this.$refs['delete-warning'].openDialog()
        }
        //购票车点点击去竞价
        biddingBill (item) {
            this.toBidding(item)
        }
        async confirmDelete () {
            let res = await this.$http.delete(`bills/billCar/${this.deleteModel.bill_car_id}`)
            this.$alert(res.msg,'提示',{
                confirmButtonText: '确定',
                customClass: 'custom-message-box'
            })
            if(res.status == 200){
                this.$refs['delete-warning'].closeDialog()
                this.getAllTips()
                this.getBillCarList()
            }
        }
        closeDialog () {
            this.$refs['delete-warning'].closeDialog()
        }
        //格式化
        formatterDate (row) {
            return moment(row.bill_product_create_time).format('MM-DD HH:mm')
        }
        formatterAcceptor (row) {
            return ellipsis(row.acceptor_name, '...', 10)
        }
        formatterPrice (row) {
            return calc.div(row.bill_sum_price,10000)
        }
        formatterFlaw (prop) {
            return ellipsis(prop, '...', 8)
        }
        // formatterTime (row) {
        //     console.log(row)
        //     return row.bill_flaw_names ? row.bill_flaw_names.join(',') : ''
        // }
        formatterEveryPlus (row) {
            return row.bidding_mode == 3210 ? '一口价' + row.bill_every_plus + '元' : '竞价'
        }
        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.transferChannel = 'page'
            this.tips()
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.tips()
        }
        changeSort (column) {
            this.normalSort = true
            
            if(!column.column){
                this.sortMode = '-bill_product_create_time'
            }else{
                let prop = column.prop == 'bill_deadline_time_format' ? 'bill_deadline_time' : column.prop
                if(column.order == 'ascending'){
                    this.sortMode = '+'+prop
                }else{
                    this.sortMode = '-'+prop
                }
            }
            this.getBillList()
        }
        //初始化
        conditionInit () {
            //初始化查询条件
            this.form.acceptor_name = this.marketSearch.acceptor_name
            this.acceptorTypeArr = this.marketSearch.acceptorTypeArr
            this.form.acceptorType = this.acceptorTypeArr.join(',')

            this.filterCondition.billPrice.min = this.marketSearch.billPrice.min
            this.filterCondition.billPrice.max = this.marketSearch.billPrice.max
            this.filterCondition.billPrice.gtoe = this.marketSearch.billPrice.gtoe
            this.filterCondition.billPrice.ltoe = this.marketSearch.billPrice.ltoe
            let billPriceOption = this.billPriceOption.filter(el => el.billPriceMin == this.marketSearch.billPrice.min && el.billPriceMax == this.marketSearch.billPrice.max)
            if(billPriceOption.length != 0){
                this.form.billPrice = billPriceOption[0].key
            }else{
                this.form.trem_billPrice.minPrice = this.marketSearch.billPrice.min
                this.form.trem_billPrice.maxPrice = this.marketSearch.billPrice.max
            }

            this.filterCondition.expiresDays.min = this.marketSearch.expiresDays.min
            this.filterCondition.expiresDays.max = this.marketSearch.expiresDays.max
            this.filterCondition.expiresDays.gtoe = this.marketSearch.expiresDays.ltoe
            this.filterCondition.expiresDays.gtoe = this.marketSearch.expiresDays.ltoe
            let deadTimeOption = this.deadTimeOption.filter(el => el.expiresDayMin == this.marketSearch.expiresDays.min && el.expiresDayMax == this.marketSearch.expiresDays.max)
            if(deadTimeOption.length != 0){
                this.form.deadTime = deadTimeOption[0].key
            }else{
                this.form.trem_deadTime.minTime = this.marketSearch.expiresDays.min
                this.form.trem_deadTime.maxTime = this.marketSearch.expiresDays.max
            }

            this.form.flaw = this.marketSearch.bill_flaws
            this.form.biddingMode = this.marketSearch.bidding_mode
            this.form.billStatus = this.marketSearch.bill_status
            this.form.billRate = this.marketSearch.offer_rate
            this.form.everyPlus = this.marketSearch.offer_every_plus

            //初始化标签
            this.filterCondition.keyWord = this.form.acceptor_name
            this.acceptorTypeArr.forEach(e => {
                this.acceptOptions.forEach(el => {
                    if(e == el.key){
                        this.filterCondition.acceptType = el.label
                        this.form.acceptorType != '' ? this.getConditionTag(this.filterType.acceptType, 'acceptorType') : ''
                    }
                })
            })
            this.filterCondition.flaw = _.find(this.flawOptions,(e:any) => {return e.key == this.form.flaw}).label
            this.filterCondition.biddingMode = _.find(this.biddingModeOption,(e:any) => {return e.key == this.form.biddingMode}).label
            this.filterCondition.billStatus = _.find(this.billStatusOption,(e:any) => {return e.key == this.form.billStatus}).label
            this.filterCondition.hopePrice.rate = this.form.billRate
            this.filterCondition.hopePrice.everyPlus = this.form.everyPlus
            //添加标签
            this.form.acceptor_name != '' ? this.getConditionTag(this.filterType.keyWord,'acceptor_name') : ''
            // this.form.acceptorType != '' ? this.getConditionTag(this.filterType.acceptType, 'acceptorType') : ''
            this.filterCondition.billPrice.min != '' && this.filterCondition.billPrice.max != '' ? this.getConditionTag(this.filterType.billPrice,'billPrice') : ''
            this.filterCondition.expiresDays.min != '' && this.filterCondition.expiresDays.max != '' ? this.getConditionTag(this.filterType.expiresDays,'expiresDays') : ''
            this.form.flaw != '' ? this.getConditionTag(this.filterType.flaw, 'flaw') : ''
            this.form.biddingMode != '' ? this.getConditionTag(this.filterType.biddingMode,'biddingMode') : ''
            this.form.billStatus != '' ? this.getConditionTag(this.filterType.billStatus, 'billStatus') : ''
            this.form.billRate ? this.getConditionTag(this.filterType.hopePrice, 'hopePrice') : ''
        }
        created() {
            let userinfo = localStorage.getItem('userInfo');
            if (userinfo) {
                this.userInfo = JSON.parse(userinfo);
                this.isLogin = true
            }else{
                this.isLogin = false
            }
            // this.userInfo ? this.isLogin = true : this.isLogin = false
            let searchCondition = localStorage.getItem('searchMarket')
            if(searchCondition){
                if(!this.isLogin){
                    return false
                }
                this.marketSearch = JSON.parse(searchCondition)

                this.conditionInit()
            }
        }
        timer:any = null
        mounted () {
            this.timer = setInterval(()=>{
                if(this.isLogin){
                    this.getBillList()
                }else{
                    this.clearFilter()
                    this.getBillList()
                }
            },60000)
            this.getBillCarList()
            this.getMessageNumber();
            this.getAllTips();
        }
        destroyed() {
            clearInterval(this.timer)
        }
    }
</script>

<style lang="scss" scoped>
    .el-main{
        overflow: inherit;
        padding-top: 96px;
    }
    // .header{
    //     min-width: 1400px;
    // }
    // .footer{
    //     min-width: 1400px;
    // }
    .content{
        .toTradePage{
            position: fixed;
            top: 50%;
            margin-top: -175px;
            right: 0;
            width: 100px;
            height: 100px;
            z-index: 1000;
        }
        .sideBtn{
            position: fixed;
            top: 50%;
            margin-top: -75px;
            right: 0px;
            z-index: 1000;
        }
        width: 84%;
        // min-width: 1400px;
        margin: 20px auto;
        .filter_block{
            margin-bottom: 52px;
            .block{
                box-shadow: 2px 2px 10px 2px $__color-line;
                border-radius: 4px;
            }
            .block_left{
                padding: 12px 0;
                width: 73%;
                margin-right: 1%;
                float: left;
                .bill_rate{
                    width: 88px;
                }
                .every_plus{
                    width: 124px;
                }
                .tips{
                    margin: 0 12px;
                    cursor: pointer;
                    width: 16px;
                    height: 16px;
                }
                .condition_tangs{
                    border-top: 1px solid $__color-bg-primary;
                    margin-bottom: 0;
                    .el-tag{
                        margin-right: 10px;
                        border-color: #E84F5A;
                        background-color: #FEF6F7;
                    }
                }
                .clear_filter{
                    margin-left: 30px;
                    cursor: pointer;
                    color: $__color-label;
                    font-size: 14px;
                    i{
                        vertical-align: middle;
                    }
                }
                .custom_condition{
                    .el-form-item__content{
                        position: relative;
                        .confirm_price{
                            padding: 8px 15px;
                            font-size: 14px;
                            border-radius: 4px;
                            position: absolute;
                            left: 630px;
                        }
                        .cancel_price{
                            position: absolute;
                            left: 705px;
                        }
                        .confirm_days{
                            position: absolute;
                            left: 765px;
                        }
                        .cancel_days{
                            position: absolute;
                            left: 840px;
                        }
                    }
                }
            }
            .block_right{
                float: left;
                width: 26%;
                height: 463px;
                border-top: 2px solid $__color-primary;
                color: $__color-label;
                position: relative;
                .block_title{
                    text-align: center;
                    background-color: $__color-bg-primary;
                    height: 60px;
                    line-height: 60px;
                    font-weight: 600;
                    font-size: 18px;
                }
                .myBillCar{
                    .welcome{
                        font-size: 14px;
                        color: $__color-label;
                        text-align: center;
                        line-height: 120px;
                    }
                    .operate{
                        text-align: center;
                        .el-button{
                            width: 86px;
                            font-size: 14px;
                            &:last-child{
                                margin-left: 20px;
                            }
                        }
                    }
                    .foundBill{
                        width: 82%;
                        margin: 30px auto;
                        background-color: $__color-bg-primary;
                        border-radius: 8px;
                        height: 100px;
                        line-height: 100px;
                        text-align: center;
                        font-size: 14px;
                    }
                }
                .more{
                    width: 100%;
                    padding: 0 10px;
                    position: absolute;
                    bottom: 10px;
                    text-align: right;
                    line-height: 32px;
                    font-size: 14px;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline; 
                    }
                }
            }
        }
        .table_title{
            height: 48px;
            .title_word{
                display: inline-block;
                height: 18px;
                line-height: 18px;
                margin-top: 11px;
                border-left: 2px solid $__color-primary;
                padding-left: 6px;
                margin-right: 40px;
                color: $__color-label;
                font-size: 18px;
            }
            .el-button{
                font-size: 14px;
            }
        }
        .bill_data{
            border-top: 1px solid $__color-primary;
            .bill_source{
                position: relative;
                top: 3px;
                .iconfont{
                    font-size: 22px;
                }
            }
            .el-table{
                tr td:nth-child(2){
                    .cell{
                        text-align: left !important;
                    }
                }
            }
        }
        .restDay{
            width: 400px;
            height: 150px;
            text-align: center;
            display: table;
            background-color: $__color-bg-primary;
            margin: 30px auto;
            margin-bottom: 60px;
            border-radius: 4px;
            font-size: 16px;
            color: $__color-label;
            .middle_inner{
                display: table-cell;
                vertical-align:middle;
                p{
                    line-height: 30px;
                }
                .time{
                    font-size: 18px;
                    .detailTime{
                        color: $__color-show;
                    }
                }
            }
        }
    .rem-dialog-con .warning{
        height: 30px;
        margin-bottom: 12px;
        .iconfont{
            font-size: 30px;
        }
    }
}
</style>
<style lang="scss">
    .nowrap{
        white-space:nowrap;
        .bill_price{
            margin-top: -5.5px !important;
            .el-radio-button:last-child .el-radio-button__inner{
                border-radius: 0 !important;
                border-right: none;
            }
        }
        .ready_bill_price{
            display: inline-block;
            height: 32px;
            padding: 0 15px !important;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            border-radius: 0px 4px 4px 0 !important;
            // border-left: none;
            margin-left: -3.5px !important;
            &:hover{
                // background-color: $__color-primary !important;
                // border-color: #dcdfe6 !important; 
            }
            // &:visited{
            //     background-color: #fff !important;
            //     border-color: #dcdfe6 !important;
            // }
            .el-input{
                width: 35px;
                .el-input__inner{
                    padding: 0 2px !important;
                    height: 22px;
                    border: none;
                    font-size: 14px;
                }
            }
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button{
                -webkit-appearance: none !important;
            }
            input[type="number"]{
                -moz-appearance:textfield;
            }
        }
        .el-checkbox-button--small .el-checkbox-button__inner{
            padding: 8px 15px;
            font-size: 14px;
            font-weight: 400;
            // color: $__color-label;
        }
        .el-radio-button--small .el-radio-button__inner{
            padding: 8px 15px;
            font-size: 14px;
            font-weight: 400;
            // color: $__color-label;
        }
    }
    .is_active{
        color: #fff !important;
        background-color: $__color-primary;
        box-shadow: -1px 0 0 0 $__color-primary;
        border-color: $__color-primary !important;
        .el-input{
            .el-input__inner{
                background-color: $__color-primary;
                color: #fff;
            }
        }
    }
    .is_focus{
        border: 1px solid $__color-primary !important;
    }
    .market_pagination{
        position: relative;
        margin-top: 20px;
        height: 30px;
        .el-pagination{
            position: absolute;
            right: 0;
        }
    }
    .keywords{
        .el-input-group--append .el-input__inner{
            border-right: none;
        }
        .el-input-group__append{
            background: $__color-primary !important;
            color: #fff;
            border: 1px solid $__color-primary;
        }
    }
    @media screen and (max-width: 1600px){
        .content{
            width: 1410px !important;
        }
    }
    @media screen and (max-width: 1550px){
        .content{
            width: 1380px !important;
        }
    }
    @media screen and (max-width: 1500px){
        .content{
            width: 1350px !important;
        }
    }
    @media screen and (max-width: 1450px){
        .content{
            width: 1300px !important;
        }
    }
    @media screen and (max-width: 1400px){
        .content{
            width: 1280px !important;
        }
    }
    @media screen and (max-width: 1350px){
        .content{
            width: 1250px !important;
            .block_left{
                .el-form-item__label{
                    width: 90px !important;
                }
                .el-form-item__content{
                    margin-left: 90px !important;
                }
            }
        }
    }
    @media screen and (max-width: 1300px){
        .content{
            width: 1220px !important;
        }
        .block_left{
            .nowrap .el-checkbox-button--small .el-checkbox-button__inner{
                padding: 8px 12px;
            }
            .nowrap .el-radio-button--small .el-radio-button__inner{
                padding: 8px 12px;
            }
        }
        .custom_condition{
            .el-form-item__content{
                position: relative;
                .confirm_price{
                    position: absolute;
                    left: 600px !important;
                }
                .cancel_price{
                    position: absolute;
                    left: 675px;
                }
                .confirm_days{
                    position: absolute;
                    left: 730px !important;
                }
                .cancel_days{
                    position: absolute;
                    left: 840px;
                }
            }
        }
    }
    @media screen and (max-width: 1250px){
        .content{
            width: 1200px !important;
        }
    }
</style>
